<template>
	<view :class="['vh100',{'dark':theme == 'dark'}]">
		<view class="pt20 plr20">
			<view class="flex alcenter mt10">
				<image src="../../static/image/tssp.png" class="wt15 h15"></image>
				<view class="chengse ft14"> {{$t('bico.W243')}}</view>
			</view>
			<!-- 邮箱验证码 -->
			<view class="alcenter bdb_myblue mb10 mt30">
				<view class="flex">
					<input class="identifying-code-input" @input="codeInput" type="number" v-model="code" :placeholder="$t('login').r_pemailcode" />
					<view class="ft10 pt5 identifying-code-btn" :class="{ actived: getCodeState, 'active': !getCodeState }" @click="getEmailCode" :disabled="!getCodeState">
					  <view class="title" v-if="getCodeState">{{$t('login').get_code}}</view>
					  <view class="title" v-if="!getCodeState">{{$t('login').still_rest}}{{ countDown }} s</view>
					</view>
				</view>
				<view class="ft10 pt5 chengse" v-if="email_length">{{$t('login').r_code_length}}</view>
			</view>
			<view class="mb10">
				<view class="flex bgwhite alcenter bdb_myblue " >
					<input type="text" password="" v-model="password" @input="passwordInput1" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').e_pdeal">
					<image src="/static/image/password.png" class="wt15 h15 ml10"></image>
				</view>
				<view class="ft10 pt5 chengse" v-if="verifyPwd1">{{$t('login').p_len}}</view>
			</view>
			<view class="mb10">
				<view class="flex bgwhite alcenter bdb_myblue ">
					<input type="text" password="" v-model="re_password" @input="passwordInput2" class="h40 lh40 flex1 input-uni" :placeholder="$t('login').e_pdealConfrim">
					<image src="/static/image/password.png" class="wt15 h15 ml10"></image>
				</view>
				<view class="ft10 pt5 chengse" v-if="verifyPwd2">{{$t('login').p_notsame}}</view>
			</view>
			<view class="flex bgwhite alcenter bdb_myblue " v-if="(!smsSendBoolean)&&(!emailSendBoolean)">
				<input type="text" v-model="code"  class="h40 lh40 flex1 input-uni" :placeholder="$t('login').p_vcode">
				<view><button size="mini" type="primary" :disabled="disable" :loading="load" @click="send">{{codeText}}</button></view>
			</view>
			<view class="mt45 bgBlue radius4 ptb10 white ft19 tc mb10" @tap="register">{{$t('login').e_confrim}}</view>
		</view>
	</view>
	
</template>

<script>
	import {mapState,mapActions,mapGetters} from 'vuex';
	import {getMsg,pwd,commonCheckSmsSend,commonCheckEmailSend,commonGetEmailCode} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'
	export default{
		mixins:[myMixins],
		data(){
			return {
				user_string:sessionStorage.getItem('accountEmail'),
				password:'',
				re_password:'',
				getCodeState: true,
				TIME_COUNT: 60,
				timer: null,
				countDown: '',
				code:'',
				area_code:'',
				isAgree:false,
				invite_code:'',
				email_length:false,
				verifyPwd1:false,
				verifyPwd2:false,
				lang:'',
				disable:false,
				load:false,
				codeText:this.$t('login').r_send,
				accountNumber:'',
				smsSendBoolean:true,
				emailSendBoolean:true,
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad(e) {
			// this.getUserInfo();
			// this.user_string=e.user_string;
			// this.code=e.code;
			// this.is_mobile=this.is_mobile;
			// this.area_code=this.areaCode;
			this.lang=uni.getStorageSync('lang');
			uni.setNavigationBarTitle({
				title:this.$t('bico.W244'),
			})
			this.getSmsSend();
			this.getEmailSend()
			this.$utils.setTheme(this.theme);
		},
		methods:{
			// 获取邮箱验证码
			getEmailCode() {
				this.$utils.initData({url:commonGetEmailCode,type:'POST',
					data:{
						email: this.user_string,
						type:3
					}},(res,msg)=>{
					//60秒之后获取验证码
					if (!this.timer) {
					  this.countDown = this.TIME_COUNT;
					  this.getCodeState = false
					  this.timer = setInterval(() => {
						if (this.countDown > 0 && this.countDown <= this.TIME_COUNT) {
						  this.countDown--;
						} else {
						  this.getCodeState = true;
						  clearInterval(this.timer);
						  this.timer = null;
						}
					  }, 1000)
					}
					
					// setTimeout(()=>{
					// 	this.$utils.showLayer(this.$t('bind').sendSuccess);
					// },100)
				})
			},
			getSmsSend(){
			   this.$utils.initData({url:commonCheckSmsSend,type:'post'},(res,msg)=>{
			   	this.smsSendBoolean = res == "N"
			   })
					
			 },
			 getEmailSend(){
				 this.$utils.initData({url:commonCheckEmailSend,type:'post'},(res,msg)=>{
				 	this.emailSendBoolean = res == "N"
				 })
			 },
			//获取用户信息
			getUserInfo(){
				var that = this;
				this.$utils.initDataToken({url:'user/info',data:{},type:'get'},(res,msg)=>{
					that.accountNumber = res.account_number;
					});
				},
			//发送验证码
			send(){
				var url= getMsg;
				this.$utils.initDataToken({url:url,type:'post'},(res,msg)=>{
					   this.disable = true;
					   // this.load = true;
					   var times = 120;
					   var timer = setInterval(()=>{
					   	times--;
					   	if(times<10){
					   		times = '0'+times;
					   	}
					   	this.codeText = times + 's'
					   	if(times<=0){
					   		clearInterval(timer);
					   		this.disable = false;
					   		this.load = false;
					   		this.codeText = this.$t('login').r_send;
					   	}
					   },1000)
					});
			},
			codeInput(e){
				if(e.target.value.length<6){
					this.email_length=true;
				}else{
					this.email_length=false;
				}
			},
			passwordInput1(e){
				if(e.target.value.length<6){
					this.verifyPwd1=true;
				}else{
					this.verifyPwd1=false;
				}
			},
			passwordInput2(e){
				if(e.target.value!=this.password){
					this.verifyPwd2=true;
				}else{
					this.verifyPwd2=false;
				}
			},
			tapChecked(){
				this.isAgree=!this.isAgree;
			},
			register(){
				var that = this;
				if(!this.code){
					return this.$utils.showLayer(this.$t('login').r_pemailcode)
				}
				if(this.code.length<6){
					return this.$utils.showLayer(this.$t('login').r_code_length)
				}
				if(!this.password){
					return this.$utils.showLayer(this.$t('login').e_pdeal)
				}
				if(this.password.length<6){
					return this.$utils.showLayer(this.$t('login').p_simple)
				}
				if(this.password!=this.re_password){
					return this.$utils.showLayer(this.$t('login').p_inputagain)
				}
				if(!this.smsSendBoolean&&(!this.emailSendBoolean)){
					if(!this.code){
						this.$utils.showLayer(this.$t('login').p_vcode);
						return;
					}
				}
				
				var data={
					'newPwd':this.password,
					'confirmPwd':this.re_password,
					'type':'PAY',
					'email':this.user_string,
					'msg': this.code,
				}
				this.$utils.initDataToken({url:pwd,data,type:'get'},(res,msg)=>{
					
					setTimeout(()=>{
						that.$utils.showLayer(msg);
					},100)
					setTimeout(()=>{
						uni.navigateBack({
							delta:1
						}) 
					},1000)
				})
			}
		}
	}
</script>

<style lang="scss">
	.identifying-code-btn {
	  width: 300rpx;
	  height: 78rpx;
	  line-height: 78rpx;	  
	  text-align: center;
	  color: #fff;
	}
	.title{
		// height: 78rpx;
		// line-height: 78rpx;
	}
	.actived{
		background: #9acaef;
	}
	.active {		  
	  background-color: #ccc;
	}
	.identifying-code-input {
	  width: 462rpx;
	  height: 78rpx;
	  display: block;
		
	}
	.chengse {
	    color: #05cfa4;
	    margin: 0 2vw;
	}
	.ft14 {
	    font-size: 12px;
	}
	.vh100 {
	    min-height: 100vh;
	    margin: 0 2vw;
	}
	uni-view {
	    box-sizing: border-box;
	    line-height: 1.8;
	}
	.ft19 {
	    font-size: 4vw;
	}
	
	
	
	
	
	
	
	
	
	
	
	
</style>
